<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="./echarts.min.js"></script>
    <style>
      #main {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#main"));

      const option = {
        title: [
          {
            text: "男女薪资分布",
          },
          {
            subtext: "男生",
            left: "50%",
            top: "45%",
            textAlign: "center",
          },
          {
            subtext: "女生",
            left: "50%",
            top: "85%",
            textAlign: "center",
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["40%", "50%"],
            center: ["50%", "30%"],
            data: [
              {
                name: "1万以下",
                value: 108,
              },
              {
                name: "1-1.5万",
                value: 735,
              },
              {
                name: "1.5-2万",
                value: 580,
              },
              {
                name: "2万以上",
                value: 484,
              },
            ],
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 5,
            },
            left: "33.3333%",
            right: "33.3333%",
            top: 0,
            bottom: 0,
          },
          {
            type: "pie",
            radius: ["40%", "50%"],
            center: ["50%", "70%"],
            data: [
              {
                name: "1万以下",
                value: 108,
              },
              {
                name: "1-1.5万",
                value: 735,
              },
              {
                name: "1.5-2万",
                value: 580,
              },
              {
                name: "2万以上",
                value: 484,
              },
            ],
            label: {
              position: "outer",
              alignTo: "labelLine",
              bleedMargin: 5,
            },
            left: "33.3333%",
            right: "33.3333%",
            top: 0,
            bottom: 0,
          },
        ],
        color: ["#f1a445", "#5f99f7", "#6accfa", "#69cf9e"],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
